<template>
	<view class="wrap">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="false" :circular="true">
			<swiper-item v-for="(item, index) in shopDetail.images" :key="index">
				<image :src="item.imageUrl" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>

		<!-- 店铺基本信息 -->
		<view class="shop-info">
			<view class="shop-header">
				<image class="shop-avatar" :src="shopDetail.image" mode="aspectFill"></image>
				<view class="shop-content">
					<view class="shop-name">{{shopDetail.shopName}}</view>
					<view class="shop-desc">{{shopDetail.shopNotice}}</view>
				</view>
			</view>
			<view class="shop-data">
				<view class="data-item">
					<text class="num">{{shopDetail.monthlySales || 0}}</text>
					<text class="label">月售</text>
				</view>
				<view class="data-item">
					<text class="num">{{shopDetail.rating || 5}}</text>
					<text class="label">评分</text>
				</view>
				<view class="data-item">
					<text class="num">{{shopDetail.avgConsumption || 89}}/人</text>
					<text class="label">人均消费</text>
				</view>
			</view>
		</view>

		<!-- 营业信息 -->
		<view class="business-info">
			<view class="info-title">营业信息</view>
			<view class="info-item">
				<text class="label">营业时间</text>
				<text class="value">{{shopDetail.businessDay}} {{shopDetail.businessHours || '10:00-22:00'}}</text>
			</view>
			<view class="info-item">
				<text class="label">配送服务</text>
				<text class="value">{{shopDetail.deliveryService || '商家自配送'}}</text>
			</view>
			<view class="info-item">
				<text class="label">配送费</text>
				<text class="value">¥{{shopDetail.deliveryFee || '0'}}</text>
			</view>
			<view class="info-item">
				<text class="label">起送价</text>
				<text class="value">¥{{shopDetail.minDeliveryPrice || '0'}}</text>
			</view>
		</view>

		<!-- 店铺地址 -->
		<view class="shop-address">
			<view class="info-title">店铺地址</view>
			<view class="address-content">
				<view class="address-text">{{shopDetail.address}}</view>
				<view class="address-actions">
					<view class="action-btn" @tap="copyAddress">
						<u-icon name="file-text" size="32" color="#666"></u-icon>
						<text>复制</text>
					</view>
					<view class="action-btn" @tap="openMap">
						<u-icon name="map" size="32" color="#666"></u-icon>
						<text>导航</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 联系商家 -->
		<view class="contact-btn" @tap="contactShop">
			联系商家
		</view>
	</view>
</template>

<script>
	import {
		getShopDetail
	} from '@/request/API.js';
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				shopDetail: {}
			}
		},
		onLoad() {
			this.getshopDetail();
		},
		methods: {
			// 获取店铺信息
			async getshopDetail() {
				try {
					const {
						data
					} = await getShopDetail({
						id: 1,
					});
					this.shopDetail = data;
				} catch (error) {
					this.$u.toast('获取店铺信息失败');
				}
			},
			// 复制地址
			copyAddress() {
				uni.setClipboardData({
					data: this.shopDetail.address,
					success: () => {
						this.$u.toast('地址已复制');
					}
				});
			},
			// 打开地图
			openMap() {
				uni.openLocation({
					latitude: Number(this.shopDetail.latitude),
					longitude: Number(this.shopDetail.longitude),
					name: this.shopDetail.shopName,
					address: this.shopDetail.address
				});
			},
			// 联系商家
			contactShop() {
				uni.makePhoneCall({
					phoneNumber: this.shopDetail.phone
				});
			}
		},
		computed: {
			// ...mapState(['shopDetail'])
		}
	}
</script>

<style lang="scss">
	.wrap {
		background: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;

		.swiper {
			width: 100%;
			height: 400rpx;
			margin-bottom: 20rpx;

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}

		.shop-info {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-top: -40rpx;
			position: relative;
			z-index: 1;
			margin-bottom: 20rpx;

			.shop-header {
				display: flex;
				margin-bottom: 30rpx;

				.shop-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}

				.shop-content {
					flex: 1;

					.shop-name {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 12rpx;
					}

					.shop-desc {
						font-size: 26rpx;
						color: #666;
						line-height: 1.5;
					}
				}
			}

			.shop-data {
				display: flex;
				justify-content: space-around;
				border-top: 1rpx solid #f5f5f5;
				padding-top: 30rpx;

				.data-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.num {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
					}

					.label {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}

		.business-info,
		.shop-address {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.info-title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
			}

			.info-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				font-size: 28rpx;

				.label {
					color: #666;
				}

				.value {
					color: #333;
				}
			}
		}

		.shop-address {
			.address-content {
				.address-text {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 20rpx;
					line-height: 1.5;
				}

				.address-actions {
					display: flex;
					gap: 40rpx;

					.action-btn {
						display: flex;
						flex-direction: column;
						align-items: center;

						text {
							font-size: 24rpx;
							color: #666;
							margin-top: 8rpx;
						}
					}
				}
			}
		}

		.contact-btn {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #EE2F37;
			color: #fff;
			font-size: 32rpx;
			padding: 24rpx 100rpx;
			border-radius: 40rpx;
			font-weight: bold;
		}
	}
</style>